<template>
<layout ref="layout" width="620px" :okButton="false" :fullscreen="false" title="上传头像" :closable="false" @on-ok="saverOrUpdate" @on-cancel="back" :loading="loading">
  <Row slot="content">
    <Col span="24">
      <cropper crop-button-text="确认提交"
               @on-crop="handleCroped"></cropper>
    </Col>
  </Row>
</layout>
</template>

<script>
import layout from '_c/layout/layout.vue'
import Cropper from '@/components/cropper'
import { uploadAvatar } from '../../api/sys/user'

export default {
  name: 'upload-av',
  components: {
    layout,
    Cropper
  },
  data () {
    return {
      exampleImageSrc: 'https://file.iviewui.com/dist/a0e88e83800f138b94d2414621bd9704.png',
      loading: false
    }
  },
  methods: {
    show () {
      this.$refs['layout'].show()
    },
    handleCroped (blob) {
      const formData = new FormData()
      formData.append('file', blob)
      uploadAvatar(formData).then((res) => {
        if (res.code === 200) {
          this.$Message.success('修改成功')
          this.$emit('back')
          this.$refs['layout'].hide()
        }
      })
    },
    saverOrUpdate () {},
    back () {
    }
  }
}
</script>

<style scoped>

</style>
